<template>
  <div :class="getClass" @click="toggleDarkMode">    
    <div :class="`${prefixCls}-inner`"></div>  
    <span :class="`${prefixCls}-icon`"><SvgIcon size="14" name="sun" /></span>
    <span :class="`${prefixCls}-icon`"><SvgIcon size="14" name="moon" /></span>
  </div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  // import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
  import { updateDarkTheme } from '/@/logics/theme/dark';
  import { ThemeEnum } from '/@/enums/appEnum';

  const { prefixCls } = useDesign('dark-switch');
  const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);

  const getClass = computed(() => [
    prefixCls,{[`${prefixCls}--dark`]: unref(isDark)},
  ]);

  function toggleDarkMode() {
    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
    setDarkMode(darkMode);
    updateDarkTheme(darkMode);
  }
</script>

<style lang="scss">
  $prefix-cls: '#{$namespace}-dark-switch';

  html[data-dark='dark'] {
    .#{$prefix-cls} {
      border: 0px solid rgb(196 188 188);
    }
  }

  .#{$prefix-cls} {
    position: relative;
    display: flex;
    width: 48px;
    height: 24px;
    padding: 0 0px;
    margin-left: auto;
    cursor: pointer;
    background-color: #ebedf0;
    border-radius: 100vw;
    justify-content: space-between;
    align-items: center;

    &-inner {
      position: absolute;
      z-index: 1;
      width: 24px;
      height: 24px;
      background-color: #314659;
      border-radius: 50%;
      transition: transform 0.5s, background-color 0.5s;
      will-change: transform;
    }
    &-icon {
      z-index: 2;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      transition: transform 0.5s, color 0.5s;
    }
    >span{
        color: #fff;
      }
      >span:last-child{
        color: #000;
      }
    &--dark {
      >span{
        color: #000;
      }
      >span:last-child{
        color: #fff;
      }
      .#{$prefix-cls}-inner {
        transform: translateX(calc(100%));
      }
    }
  }
</style>